<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-02-20 16:55:21
 * @FilePath: \aster-flowable-uniapp\src\pages\form\form-render.vue
 * @Description: 渲染组件
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<template>
  <view>
    <van-form ref="formRef" autocomplete="off" label-align="left">
      <template v-for="(item, index) in _formItems" :key="index">
        <form-design-render
          v-if="
            item.name === 'GridLayout' || item.name === 'GridTitle' || item.name === 'Description'
          "
          v-model:value="_formData"
          :ref="item.id"
          :mode="mode"
          :formData="_formData"
          :formItem="item"
        />
        <form-design-render
          v-else
          v-model:value="_formData[item.id]"
          :ref="item.id"
          :mode="mode"
          :formData="_formData"
          :formItem="item"
        />
      </template>
    </van-form>
  </view>
</template>
<script setup lang="ts">
  import { computed, PropType, ref } from 'vue';
  import FormDesignRender from '@/components/form/form-design-render.vue';
  import { Toast } from '@/utils/uniapi/prompt';

  const emits = defineEmits(['update:formData']);
  const props = defineProps({
    mode: {
      type: String as PropType<'design' | 'form' | 'search' | 'table' | 'print'>,
      default: 'form',
    },
    formData: {
      type: Object as PropType<WorkForm.FormDataModel>,
      default: () => {},
    },
    formItems: {
      type: Array<WorkComponent.ComponentConfig>,
      default: () => [],
    },
    formInfo: {
      type: Object as PropType<WorkForm.BaseInfo>,
      default: () => {},
    },
    tableIndex: {
      type: Number,
      default: 0,
    },
  });

  // 注册组件
  const formRef = ref();

  /**
   * 表单项
   */
  const _formItems = computed(() => {
    return props.formItems;
  });

  /**
   * 表单数据
   */
  const _formData = computed({
    get() {
      return props.formData;
    },
    set(val) {
      emits('update:formData', val);
    },
  });

  /**
   * @description: 表单校验
   * @return {*}
   */
  const validate = async (callback: Function) => {
    try {
      await formRef.value.validate();
      callback();
    } catch (error) {
      console.log('表单校验失败', error);
      Toast('表单校验失败!');
    }
  };

  defineExpose({
    validate,
  });
</script>
<style scoped lang="scss"></style>
